Skip to content
alex.dev

March 24, 2026

6 min read

CSS Grid Is Easier Than You Think

#css #fundamentals

CSS Grid has a reputation problem. The spec is enormous, the tutorials are enormous, and so people file it under "learn later" and keep nesting flexbox until something works. But the day-to-day reality is small: about six properties cover almost every layout I've shipped in the last three years.

The 90% subset

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
}

That's a sidebar layout — the thing that used to take floats, clearfixes, and prayer. grid-template-columns describes the columns, gap spaces them, and the children just fall into place. No classes on the children at all. Most of the time, laying out the parent is the entire job.

The one line that replaces media queries

My single favorite line of CSS:

grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

Cards that are never narrower than 280px, filling as many columns as fit, wrapping as the container shrinks — with zero media queries. This one declaration replaced hundreds of lines of breakpoint fiddling in my projects. If you learn nothing else about Grid, learn this.

Placing the occasional rebel

Sometimes one child needs to break the pattern — a feature card spanning two columns, a footer spanning everything. That's grid-column:

.feature { grid-column: span 2; }
.footer  { grid-column: 1 / -1; }

The 1 / -1 idiom means "first line to last line" — full width, no matter how many columns the grid currently has. Those two lines, plus their grid-row twins, cover nearly every exception you'll meet.

When it's not Grid

Flexbox still earns its keep for one-dimensional rows that should size to their content — toolbars, tag lists, button groups. My rule of thumb: if I'm describing a shape (columns, areas, alignment across rows), it's Grid. If I'm describing a row of things that should wrap naturally, it's flex. Stop choosing one religion; they're a team.

Keep reading